<template>
  <div class="goods-main">
    <!--  html  -->
    <!--门店列表-->
    <div class="fl">
      <ShopListMenu :has-headquarters="true" @emitShopId="emitShopId" />
    </div>

    <div v-if="shopId||shopId===0" v-loading="loading" class="left-container app-main-content-box">
      <AppMainTitle :title="'营销商品库 / '+(shopName?shopName:'')" />

      <div class="flexRBC" style="margin-bottom: 10px">
        <el-tag type="warning">
          <i class="el-icon-warning-outline" /> 优惠券商品主要解决线下支付单品券核销，普通商户不需要添加
        </el-tag>
        <div>
          <el-button round type="primary" size="medium" @click="openDialogEdit">添 加</el-button>
          <el-button round type="primary" size="medium" @click="openDialogImport">导 入</el-button>
        </div>
      </div>

      <!--筛选-->
      <div class="filterForm">
        <el-form ref="filterForm" :model="filterForm" :inline="true" label-width="100px" size="small">
          <el-form-item label="商品条码：" prop="eanCode">
            <el-input
              v-model="filterForm.eanCode"
              placeholder="请输入"
              clearable
              style="width:400px;"
            />
          </el-form-item>
          <el-form-item label="商品名称：" prop="goodsName">
            <el-input
              v-model="filterForm.goodsName"
              placeholder="请输入"
              clearable
              style="width:400px;"
            />
          </el-form-item>
          <div>
            <el-form-item label=" ">
              <el-button type="primary" round @click="submitFilterForm">查 询</el-button>
              <el-button round @click="resetFilterForm">重 置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!--表格-->
      <div>
        <el-button :disabled="checkEanCode.length===0" type="text" @click="del(checkEanCode)">删除已勾选</el-button>
        <el-button :disabled="checkEanCode.length===0" type="text" @click="copy(checkEanCode)">拷贝到其他门店</el-button>
      </div>
      <el-table
        :data="list"
        size="small"
        border
        stripe
        style="width: 100%"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed="left" />
        <el-table-column prop="eanCode" label="商品条码" />
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsPrice" label="商品价格/元">
          <template slot-scope="scope">
            {{ scope.row.goodsPrice / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间" />
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="openDialogEdit({mode:'edit',row:scope.row})">修改</el-button>
            <el-button type="text" size="small" @click="del([scope.row.eanCode])">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <pagination-direction
        v-if="paginationConfig.total !== 0"
        :config="paginationConfig"
        @sizeschange="sizesChange"
        @pagechange="pageChange"
      />
    </div>

    <!--组件-->
    <DialogEditGoods ref="dialogEditGoods" />
    <DialogImportExcel ref="dialogImportExcel" />
    <DialogShopListTree ref="dialogShopListTree" title="拷贝商品到门店" @emitShopIds="emitCopyShopIds" />
  </div>
</template>

<script>
import DialogEditGoods from './components/DialogEditGoods'
import DialogImportExcel from './components/DialogImportExcel'
import { marketingGoodsList, delMarketingGoods, copyMarketingGoods } from '@/api/marketing'

export default {
  components: {
    DialogEditGoods,
    DialogImportExcel
  },
  data() {
    return {
      // 配置
      // 分页配置
      paginationConfig: {
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      loading: false,
      // 数据
      shopName: null,
      shopId: null,
      checkEanCode: [],
      list: [],
      filterForm: {
        eanCode: null,
        goodsName: null,
        shopId: null
      }
    }
  },
  computed: {},
  watch: {},
  beforeCreate() {
  },
  created() {
  },
  beforeMount() {
  },
  mounted() {
  },
  beforeUpdate() {
  },
  update() {
  },
  activated() {
  },
  deactivated() {
  },
  beforeDestroy() {
  },
  destroyed() {
  },
  methods: {
    /**
     * 数据组
     */
    // 获取数据
    fetchData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.loading = true

      const params = Object.assign({}, this.filterForm)
      params.page = page
      params.pageSize = pageSize
      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      marketingGoodsList(params).then(res => {
        this.list = res.data.list
        this.paginationConfig.total = res.data.total
        this.paginationConfig.page = res.data.pageNum
      }).finally(() => {
        this.loading = false
      })
    },

    // 分页sizes改变
    sizesChange() {
      this.fetchData()
    },

    // 分页page改变
    pageChange() {
      this.fetchData()
    },

    /**
     * 按钮组
     */
    // 选中门店
    emitShopId(item) {
      this.filterForm = {
        eanCode: null,
        goodsName: null,
        shopId: item.shopId
      }
      this.checkEanCode = []
      this.shopId = item.shopId
      this.shopName = item.shopName
      this.fetchData()
    },

    // 查询
    submitFilterForm() {
      this.fetchData(1)
    },

    // 重置
    resetFilterForm() {
      this.$refs.filterForm.resetFields()
    },

    // 新增编辑
    openDialogEdit({ mode = 'add', row = '' }) {
      this.$refs.dialogEditGoods.open({ mode, row }).then(res => {
        this.fetchData()
      })
    },

    // 导入
    openDialogImport() {
      this.$refs.dialogImportExcel.open().then(res => {
        this.fetchData()
      })
    },

    // 删除
    del(eanCodes) {
      this.loading = true
      const params = {
        eanCodes,
        shopId: this.shopId
      }
      delMarketingGoods(params).then(() => {
        this.$notify({
          title: '成功',
          message: '删除成功',
          type: 'success',
          duration: 2000,
          offset: 40
        })
        this.fetchData()
      }).finally(() => {
        this.loading = false
      })
    },

    // 复制
    copy() {
      this.$refs.dialogShopListTree.open()
    },

    // copy商品
    emitCopyShopIds(ids = []) {
      if (ids.length) {
        const params = {
          eanCodes: this.checkEanCode,
          shopId: this.shopId,
          toShopList: ids
        }
        this.$refs.dialogShopListTree.loading(true)
        copyMarketingGoods(params).then(res => {
          this.$notify({
            title: '成功',
            message: '拷贝成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
          this.$refs.dialogShopListTree.hide()
          this.fetchData()
        }).finally(() => {
          this.$refs.dialogShopListTree.loading(false)
        })
      }
    },

    /**
     * 状态组
     */
    // 多选状态栏改变
    handleSelectionChange(rows) {
      if (rows) {
        const eanCodes = []
        rows.map((item) => {
          eanCodes.push(item.eanCode)
        })
        this.checkEanCode = eanCodes
      }
    }
    /**
     * 方法组
     */
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
/* 左边 */
.left-container {
  overflow: hidden;
}
</style>
